<template lang="pug">
    .about-nav
        .about-head
            .about-us 关于御医传人
            .about-sub ABOUT
        ul.about-links
            li.active
                router-link(:to="{name: 'about'}") 致养生业同行
            li
                router-link(:to="{name: 'about-intro'}") 御医传人简介
            li
                router-link(:to="{name: 'about-position'}") 御医传人定位

        .about-head
            .about-us 产品与项目
            .about-sub PRODUCTS
        ul.about-links
            li.active
                router-link(:to="{name: 'production'}") 产品优势
            li
                router-link(:to="{name: 'production-advance'}") 项目优势
            li
                router-link(:to="{name: 'production-market'}") 营销优势

</template>

<style lang="postcss">
    .about-nav{
        width: 195px;
        position: absolute;
        top:-70px; left:0;
        background: #178067;
        padding-bottom: 100px;
        min-height: 400px;
    }
    .about-head{
        padding:33px 0 33px 26px;
    }
    .about-us{
        font-size: 24px;
        font-weight: bold;
        color: #fff;
    }
    .about-sub{
        font-family: 'MicrosoftYaHeiUI-Bold';
        color: #1FA787;
    }
    .about-links{
        font-family: 'MicrosoftYaHeiUI';
        font-weight: normal;
        border-top: 1px solid #167760;
        li{border-bottom: 1px solid #167760;
            position: relative;
            height: 44px;
            line-height: 44px;
            &:before, &:after{
                content: '';
                position: absolute;
                right: 24px;
                width: 2px;
                height: 2px;
                background:#fff;
            }
            &:before{top: 18px;}
            &:after{top: 22px;}
            &:hover, &.active{
                a{background: #FDD001;
                    width: 147px;
                }
            }
        }
        a{display: block;
            color: #fff;
            padding: 0 26px;
            text-decoration: none;
            &:after{
                content: '';
                position: absolute;
                top: 20px;
                right: 21px;
                width: 2px;
                height: 2px;
                background:#fff;
            }
        }
    }
</style>
